<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 3000px;
        }
    </style>
</head>
<body>

    <script>

        // 判断到达底部：拉动滚动条的过程中，判断页面被卷去的高度是否等于  页面的实际高度-页面的可视高度

        // onscroll是高频率触发事件  

        var flag = true ;

        // 放在外面的时候，此代码只执行一次，如果放在里面，每一个事件的执行，都要重新执行
        var maxHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight ;
        window.onscroll = function() {
            if(flag) {
                flag = !flag ;
                var t = setTimeout(function(){
                    // console.log(666);
                    flag = !flag ;
                    if(maxHeight - document.documentElement.scrollTop < 20) {
                        console.log('已经到底啦');
                    }
                } , 300)
            }
            
        }

    </script>
    
</body>
</html>